<template>
  <transition name="fade">
    <div id="PopupsBox" v-if="popupsShow" @click="popupsShow = false">
      <div class="PopupsBox" @click.stop="() => {}">
        <el-form ref="form" :model="addr" label-width="0">
          <el-form-item>
            <div class="item">
              <span>收货人：</span>
              <el-input
                class="input"
                v-model="addr.name"
                size="medium"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="item">
              <span>手机号：</span>
              <el-input
                class="input"
                v-model="addr.phone"
                size="medium"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="item">
              <span>省市区：</span>
              <el-cascader
                class="input"
                size="medium"
                :options="regionData"
                v-model="addr.city"
              >
              </el-cascader>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="item">
              <span>详细地址：</span>
              <el-input
                class="input"
                v-model="addr.addr"
                size="medium"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="item">
              <span>邮编：</span>
              <el-input
                class="input"
                v-model="addr.code"
                size="medium"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="item">
              <span>默认地址：</span>
              <div class="input"></div>
              <el-checkbox v-model="addr.default">设为默认</el-checkbox>
            </div>
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button class="button">默认按钮</el-button>
          <el-button class="button" type="primary">主要按钮</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { regionData } from "element-china-area-data";

export default {
  data() {
    return {
      regionData: regionData,
      popupsShow: false,
      addr: {
        name: "",
        phone: "",
        city: [],
        addr: "",
        code: "",
        default: true,
      },
    };
  },
  methods: {
    show(config) {
      console.log(config);
      this.popupsShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
#PopupsBox {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .PopupsBox {
    width: 342px;
    background: #ffffff;
    border-radius: 5px;
    padding: 40px;
    .item {
      display: flex;
      span {
        width: 70px;
        font-size: 14px;
        white-space: nowrap;
        color: #333333;
        line-height: 20px;
        height: 40px;
        display: flex;
        align-items: center;
      }
      .input {
        width: 0;
        flex: 1;
      }
    }
    .btn {
      display: flex;
      justify-content: space-between;
      .button {
        width: 160px;
        height: 44px;
      }
    }
  }
}
</style>
